<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>整页滚动</title>
    <link rel="stylesheet" href="./home.css" />
    <style>
      body {
        overflow: hidden;
        padding: 0;
        margin: 0;
      }

      .container {
        transition: transform 1.5s ease-in;
      }

      .page {
        height: 100vh;
        font-size: 80px;
        color: #fff;
        font-weight: 600;
        text-align: center;
        line-height: 100vh;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="head-one">
        <img src="./img/logo.png" alt="" />
      </div>
      <ul class="head-two">
        <li>官方首页</li>
        <li>绑定查询</li>
        <li>国服预选</li>
        <li>老兵绑定</li>
        <li>游戏特色</li>
        <li>社区app</li>
        <li>网吧认证</li>
      </ul>
      <div>
        <button class="btn">进入官网</button>
      </div>
    </header>
    <div class="box1">
      <div class="container">
        <div class="page page-1">
          <div class="center">
            <!--  loop循环播放 -->
            <video class="video" autoplay loop muted>
              <source src="./img/one.mp4" type="video/ogg" />
              <source src="./img/one.mp4" type="video/mp4" />
            </video>
            <div class="jlt1"></div>
          </div>
        </div>
        <div class="page page-2">
          <div class="center spear-img">
            <video class="video spear-video" autoplay loop muted>
              <source src="./img/2.mp4" type="video/ogg" />
              <source src="./img/2.mp4" type="video/mp4" />
            </video>
            <div class="jlt1 jlt2"></div>
            <div class="hide">
              <p class="click"></p>
              <p class="click1"></p>
              <p class="click2"></p>
              <p class="click3"></p>
            </div>
            <div class="center-right">
              <div class="right-head"></div>
              <div class="right-foot"></div>
            </div>
          </div>
        </div>
        <div class="page page-3">
          <div class="changeBox">
            <div class="bigBox">
              <span class="changeBoxFont weather">天气</span>
              <span class="changeBoxFont map">地形</span>
            </div>
          </div>
          <div class="center hua showFlag1">
            <div>
              <img src="./img/1.jpg" alt="" />
            </div>
            <div>
              <img src="./img/2.jpg" alt="" />
            </div>
            <div>
              <img src="./img/3.jpg" alt="" />
            </div>
          </div>
          <div class="center hua showFlag2">
            <div>
              <img src="./img/img_terrain1.jpg" alt="">
            </div>
            <div>
              <img src="./img/img_terrain2.jpg" alt="">
            </div>
            <div>
              <img src="./img/img_terrain3.jpg" alt="">
            </div>
            <div>
              <img src="./img/img_terrain4.jpg" alt="">
            </div>
            <div>
              <img src="./img/img_terrain5.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="page page-4">
          <div class="center">
            <video class="video" autoplay loop muted>
              <source src="./img/3.mp4" type="video/ogg" />
              <source src="./img/3.mp4" type="video/mp4" />
            </video>
            <div class="jlt1"></div>
          </div>
        </div>
      </div>
    </div>

    
  </body>
</html>
<script src="./home.js"></script>
<script>
      const container = document.querySelector(".container");
      const pageH = window.innerHeight; // 获取高度
      const pageCount = document.querySelectorAll(".page").length; //获取类名page元素长度

      const scrollDuation = 1e3; // 1s
      let containerScrollTop = 0; // 定义滚动的高度

      const onePageScrollHandler = throttle(onePageScroll, scrollDuation);
      window.addEventListener("wheel", onePageScrollHandler); //whell滚动事件

      function onePageScroll(evt) {
        const direction = evt.wheelDelta < 0 ? "down" : "up";
        if (direction === "down") {
          // scroll to next page
          nextPage();
        }

        if (direction === "up") {
          // scroll to prev page
          prevPage();
        }
      }

      function throttle(fn, delay) {
        // 函数节流：防止频繁触发
        let execTime = 0; // 执行时间
        return function () {
          const curTime = Date.now();
          if (execTime + delay < curTime) {
            fn.apply(this, arguments);
            execTime = curTime;
          }
        };
      }

      function nextPage() {
        if (!isReachBot()) {
          containerScrollTop += pageH;
          container.style.transform = `translateY(${-containerScrollTop}px)`;
        }
      }

      function isReachBot() {
        // if container is scroll to bot.
        return containerScrollTop === (pageCount - 1) * pageH;
      }

      function prevPage() {
        if (containerScrollTop > 0) {
          containerScrollTop -= pageH;
          container.style.transform = `translateY(${-containerScrollTop}px)`;
        }
      }
      var weather=document.querySelector('.weather')
      var map=document.querySelector('.map')
      var showFlag2=document.querySelector('.showFlag2')
      var showFlag1=document.querySelector('.showFlag1')
      console.log(showFlag2);
      weather.onclick=function(){
        console.log(1);
        showFlag1.style.opcity=1
        showFlag2.style.opcity=0
      }
      map.onclick=function(){
        console.log(2);
        showFlag1.style.opcity=0
        showFlag2.style.opcity=1
      }
    </script>